import React from 'react';
import { Button, Space, Typography } from 'antd';
import {
  TableOutlined,
  FolderOutlined,
  AppstoreOutlined,
} from '@ant-design/icons';
import type { ViewMode } from '../types/telemetry';

const { Text } = Typography;

export interface ViewModeToggleProps {
  currentMode: ViewMode;
  onModeChange: (mode: ViewMode) => void;
  disabled?: boolean;
  showLabel?: boolean;
  size?: 'small' | 'middle' | 'large';
}

const ViewModeToggle: React.FC<ViewModeToggleProps> = ({
  currentMode,
  onModeChange,
  disabled = false,
  showLabel = false,
  size = 'middle',
}) => {
  const viewModes = [
    {
      key: 'table' as ViewMode,
      icon: <TableOutlined />,
      label: '表格视图',
      description: '以表格形式显示所有遥测点',
    },
    {
      key: 'tree' as ViewMode,
      icon: <FolderOutlined />,
      label: '目录树',
      description: '按文件目录结构组织遥测点',
    },
  ];

  return (
    <div>
      {showLabel && (
        <Text type="secondary" style={{ marginRight: '12px', fontSize: '14px' }}>
          视图模式:
        </Text>
      )}
      <Space.Compact size={size}>
        {viewModes.map(mode => (
          <Button
            key={mode.key}
            type={currentMode === mode.key ? 'primary' : 'default'}
            icon={mode.icon}
            size={size}
            disabled={disabled}
            onClick={() => onModeChange(mode.key)}
            title={mode.description}
          >
            {showLabel && mode.label}
          </Button>
        ))}
      </Space.Compact>
    </div>
  );
};

export default ViewModeToggle;